@charset "utf-8";
@import "reset.scss";
@import "common.scss";
.borderSelected {
    border: 1px solid #3c3b3b; 
    border-bottom: transparent !important;
}
.wrap {
    header {
        height: 649px;
    
        .headImg {
            height: 649px;
    
            img {
                height: 649px;
            }
        }
    }
    main {
        margin: 0 auto;
        padding: 100px 48px 0 48px;
        width: 1208px;
        background-color: #f3f3f3;
        .mainArtistMain {
            position: relative;
            display: flex;
            align-items: center;
            width: 1208px;
            height: 500px;
            transform-style: preserve-3d;

            .redBorder {
                position: absolute;
                width: 1097px;
                height: 428px;
                border: solid 2px #cf0d0d;
            }

            .person {
                position: absolute;
                left: 0;
                width: 493px;
                height: 500px;
                background-color: #ffffff;
                border: solid 1px #a0a0a0;

                img {
                    width: 493px;
                    height: 412px;
                }

                >div {
                    padding-left: 5px;
                    height: 88px;

                    p {
                        font-size: 14px;
                        letter-spacing: 1px;
                        color: #7c7b7b;

                        span {
                            color: #cf0d0d;
                        }
                    }

                    div {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .personName {
                            margin: 13px 0;
                            font-size: 18px;
                            letter-spacing: 1px;
                            color: #3c3b3b;
                        }

                        input {
                            margin-right: 53px;
                            height: 20px;
                            font-size: 14px;
                            letter-spacing: 1px;
                            background-color: transparent;
                            color: #535353;
                            border: 1px solid #535353;
                        }
                    }

                }
            }

            .introduce {
                position: absolute;
                right: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 747px;
                height: 354px;
                background-color: #ffffff;

                p {
                    width: 400px;
                    height: 121px;
                    line-height: 34px;
                    letter-spacing: 1px;
                    color: #535353;
                }
            }
        }
        hr {
            margin: 96px 0;
        }
        .selectArtist {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            .recommend {
                width: 289px;
                height: 70px;
                line-height: 70px;
                text-align: center;
                border: solid 2px #cf0d0d;
                color: #cf0d0d;
                font-size: 30px;
                letter-spacing: 2px;
                margin-bottom: 96px;
            }

            .artist {
                display: flex;
                justify-content: space-between;
                width: 1006px;
                >div {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    flex-wrap: wrap;
                    height: 300px;
                    &:hover .symbol {
                        display: block;
                    }
                    &:hover .artistImg img{
                        width: 168px;
                        height: 168px;
                        border-radius: 168px;
                    }
                    .artistImg {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 186px;
                        height: 186px;
                        border: 1px solid  #cf0d0d;
                        border-radius: 186px;
                        img {
                            width: 190px;
                            height: 190px; 
                            border-radius: 190px;

                        }
                    }
                    >p {  
                        margin: 20px 0;
                        font-size: 30px;
                        letter-spacing: 2px;
                        color: #676666;
                    }
                    .symbol {
                        position: relative;
                        width: 190px;
                        height: 12px;
                        border: 3px solid #cf0d0d;
                        border-top: none;
                        display: none;
                        &::after {
                            content:'';
                            display: block;
                            position: absolute;
                            bottom: -60px;
                            left: 50%;
                            transform: translate(-50%);
                            border: 30px solid #cf0d0d; 
                            border-color: #cf0d0d transparent transparent  transparent;
                        }
                    }

                }
            } 

        }

        .screen {
            >div {
                display: flex;
                justify-content: start;
                align-items: flex-end;
                >p {
                    width: 120px;
                    height: 30px;
                    padding: 20px 0;
                    font-size: 30px;
                    letter-spacing: 2px;
                    color: #3c3b3b;
                    border-bottom: 1px solid #3c3b3b;
                }
                ul {
                    flex-grow: 8;
                    display: flex;
                    justify-content: flex-start;
                    margin-top: 36px;
                    li {
                        cursor: pointer;
                        text-align: center;
                        flex-grow: 1;
                        padding: 20px 30px;
                        font-size: 30px;
                        letter-spacing: 2px;
                        color: #3c3b3b;
                        border-bottom: 1px solid #3c3b3b;
                        // &:hover {
                            
                        //     border: 1px solid #3c3b3b;
                        //     border-bottom: none;
                        // }
                    }
                    .more {
                        flex-grow: 3;
                    }
                }
            }

        }

        .mainArtistFt {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            padding-top: 90px;

            // 整个图片
            >div {
                border: solid 1px #a0a0a0;
                margin-bottom: 20px;
                &:hover {
                    box-shadow: 0px 4px 6px 0px 
                    #b3afaf;
                    border: solid 1px #a0a0a0;
                }
                img {
                    width: 392px;
                    height: 326px;
                }

                >div {
                    padding-left: 5px;
                    height: 178px;

                    p {
                        font-size: 14px;
                        letter-spacing: 1px;
                        color: #7c7b7b;

                        span {
                            color: #cf0d0d;
                        }
                    }

                    div {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .personName {
                            margin: 50px 0;
                            font-size: 18px;
                            letter-spacing: 1px;
                            color: #3c3b3b;
                        }

                        input {
                            margin-right: 53px;
                            height: 20px;
                            font-size: 14px;
                            letter-spacing: 1px;
                            background-color: transparent;
                            color: #535353;
                            border: 1px solid #535353;
                        }
                    }
                }
            }
        }

        
        .mainFooter {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 100px;
            width: 1202px;
            >div {
                display: flex;
                flex-direction: column;
                justify-content: center;
                flex-wrap: wrap;
                .loading {
                    width: 67px;
                    img {
                        width: 67px;
                        height: 67px;
                    }
                    p {
                        font-size: 18px;
                        letter-spacing: -1px;
                        color: #999898;
                        text-align: center;
                    }
                }
                .on {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    align-self: center;
                    margin-top: 20px;
                    width: 41px;
                    height: 30px;
                    background-color: #cf0d0d;
                }
            }
        }
    }
}